import React from 'react';
import './goodsinfo.less';
import { Layout, Breadcrumb, Icon, Button, Table, Checkbox, Input, Select, Form, Pagination, message } from 'antd';
import $ from 'jquery';
import Config from '../../common/config';

const FormItem = Form.Item;
const config = new Config();
const { Header, Content, Footer, Sider } = Layout;
const Option = Select.Option;
const InputGroup = Input.Group;
const token = sessionStorage.getItem('token')

class RegForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            goodsinfolist: [],//时空商品信息
            goodsinfocount: 0,//时空商品条数
            pagesize: 10,// 每页显示的页数
            pageindex: 1,// 当前页
            Inkey: undefined,//关键字
            isdrugstatus: undefined,//类别
            iscoldstorage: undefined,//冷藏
            isspecialdrug: undefined,//特管
            salestatus: undefined,//状态
        }
    }

    componentDidMount() {
        this.GetSKproductList();
    }
    //时空商品信息列表
    GetSKproductList() {
        $.ajax({
            url: `${config.JuseProduct}/products/list`,
            type: 'get',
            headers: {
                'Authorization': 'Bearer ' + token,
            },
            data: {
                pageSize: this.state.pagesize,
                page: this.state.pageindex,
                inKey: this.state.Inkey,
                isPres: this.state.isdrugstatus,
                isRefrig: this.state.iscoldstorage,
                isEphe: this.state.isspecialdrug,
                saleStatus: this.state.salestatus,
            },
            async: true,
            success: res => {
                console.log('时空商品信息列表', res)
                if (res.code === 200) {
                    res.data.rows.forEach((item, index) => {
                        item.key = index
                    })
                    this.setState({
                        goodsinfolist: res.data.rows,
                        goodsinfocount: res.data.count,
                    })
                }
            }
        });
    }

    // 分页
    changePage(pageindex) {
        this.setState({
            pageindex
        }, () => {
            this.GetSKproductList();
        });
    }

    //类别的改变事件
    drugStatusChange(v) {
        this.setState({
            isdrugstatus: v
        });
    }

    //冷藏的改变事件
    coldstorageChange(v) {
        this.setState({
            iscoldstorage: v
        });
    }

    //特管的改变事件
    specialdrugChange(v) {
        this.setState({
            isspecialdrug: v
        });
    }

    //状态的改变事件
    salestatusChange(v) {
        this.setState({
            salestatus: v
        });
    }

    //搜索
    SearchProductInfoBtn(e) {
        const form = this.props.form;
        this.setState({
            pageindex: 1,
            Inkey: form.getFieldValue('txt_Inkey')
        }, () => {
            this.GetSKproductList()
        });
    }

    //重置
    ResetBtn(e) {
        const form = this.props.form;
        form.resetFields();
        this.setState({
            pageindex: 1,
            Inkey: undefined,
            isdrugstatus: undefined,
            iscoldstorage: undefined,
            isspecialdrug: undefined,
            salestatus: undefined,
        }, () => {
            this.GetSKproductList()
        });
    }

    //一键同步
    SynSKproduct(e) {
        $.ajax({
            url: `${config.JuseProduct}/products/sync`,
            type: 'get',
            headers: {
                'Authorization': 'Bearer ' + token,
            },
            success: res => {
                console.log('一键同步', res);
                if (res.code === 200) {
                    this.GetSKproductList();
                }
            }
        });
    }

    render() {
        const { getFieldDecorator } = this.props.form;
        const columns = [
            {
                title: '处方',
                dataIndex: '',
                width: '4%',
                render: (text, record) => (
                    record.isPres === 'Y' ? <Checkbox checked={true} disabled></Checkbox> : <Checkbox checked={false} disabled></Checkbox>
                )
            },
            {
                title: '非处方',
                dataIndex: '',
                width: '4%',
                render: (text, record) => (
                    record.isPres === 'N' ? <Checkbox checked={true} disabled></Checkbox> : <Checkbox checked={false} disabled></Checkbox>
                )
            },
            {
                title: '冷藏',
                dataIndex: '',
                width: '4%',
                render: (text, record) => (
                    record.isRefrig === 'Y' ? <Checkbox checked={true} disabled></Checkbox> : <Checkbox checked={false} disabled></Checkbox>
                )
            },
            {
                title: '特管',
                dataIndex: '',
                width: '4%',
                render: (text, record) => (
                    record.isEphe === 'Y' ? <Checkbox checked={true} disabled></Checkbox> : <Checkbox checked={false} disabled></Checkbox>
                )
            },
            {
                title: '药品内码',
                dataIndex: 'productId',
                width: '7%',
                render: (text, record) => {
                    if (record.beactive == "N") {
                        return <div className='rowchangecolor'>{text}</div>;
                    } else {
                        return <div>{text}</div>;
                    }
                }
            },
            {
                title: '药品名称',
                dataIndex: 'productName',
                width: '6%',
                render: (text, record) => {
                    if (record.beactive == "N") {
                        return <div className='rowchangecolor'>{text}</div>;
                    } else {
                        return <div>{text}</div>;
                    }
                }
            },
            {
                title: '通用名称',
                dataIndex: 'generalName',
                width: '6%',
                render: (text, record) => {
                    if (record.beactive == "N") {
                        return <div className='rowchangecolor'>{text}</div>;
                    } else {
                        return <div>{text}</div>;
                    }
                }
            },
            {
                title: '规格',
                dataIndex: 'specification',
                width: '6%',
                render: (text, record) => {
                    if (record.beactive == "N") {
                        return <div className='rowchangecolor'>{text}</div>;
                    } else {
                        return <div>{text}</div>;
                    }
                }
            },
            {
                title: '重量',
                dataIndex: 'weight',
                width: '4%',
                render: (text, record) => {
                    if (record.beactive == "N") {
                        return <div className='rowchangecolor'>{text}</div>;
                    } else {
                        return <div>{text}</div>;
                    }
                }
            },
            {
                title: '包装',
                dataIndex: 'unit',
                width: '4%',
                render: (text, record) => {
                    if (record.beactive == "N") {
                        return <div className='rowchangecolor'>{text}</div>;
                    } else {
                        return <div>{text}</div>;
                    }
                }
            },
            {
                title: '批准文号',
                dataIndex: 'approvalNo',
                width: '5%',
                render: (text, record) => {
                    if (record.beactive == "N") {
                        return <div className='rowchangecolor'>{text}</div>;
                    } else {
                        return <div>{text}</div>;
                    }
                }
            },
            {
                title: '生产厂家',
                dataIndex: 'manufacturer',
                width: '6%',
                render: (text, record) => {
                    if (record.beactive == "N") {
                        return <div className='rowchangecolor'>{text}</div>;
                    } else {
                        return <div>{text}</div>;
                    }
                }
            },
            {
                title: '品牌',
                dataIndex: 'brandName',
                width: '4%',
                render: (text, record) => {
                    if (record.beactive == "N") {
                        return <div className='rowchangecolor'>{text}</div>;
                    } else {
                        return <div>{text}</div>;
                    }
                }
            },
            {
                title: '有效期',
                dataIndex: 'inEffectDay',
                width: '4%',
                render: (text, record) => {
                    if (record.beactive == "N") {
                        return <div className='rowchangecolor'>{text ? text + '个月' : ''}</div>
                    } else {
                        return <div>{text ? text + '个月' : ''}</div>
                    }
                }
            },
            {
                title: '储存',
                dataIndex: 'storageTerm',
                width: '5%',
                render: (text, record) => {
                    if (record.beactive == "N") {
                        return <div className='rowchangecolor'>{text}</div>;
                    } else {
                        return <div>{text}</div>;
                    }
                }
            },
            {
                title: '成本价',
                dataIndex: 'cost',
                width: '5%',
                render: (text, record) => {
                    if (record.beactive == "N") {
                        return <div className='rowchangecolor'>{text}</div>;
                    } else {
                        return <div>{text}</div>;
                    }
                }
            },
            {
                title: '零售价',
                dataIndex: 'retailp',
                width: '5%',
                render: (text, record) => {
                    if (record.beactive == "N") {
                        return <div className='rowchangecolor'>{text}</div>;
                    } else {
                        return <div>{text}</div>;
                    }
                }
            },
            {
                title: '条形码',
                dataIndex: 'barcode',
                width: '7%',
                render: (text, record) => {
                    if (record.beactive == "N") {
                        return <div className='rowchangecolor'>{text}</div>;
                    } else {
                        return <div>{text}</div>;
                    }
                }
            },
            {
                title: '库存',
                dataIndex: '',
                width: '5%',
                render: (text, record) => {
                    if (record.beactive == "N") {
                        return <div className='rowchangecolor'>{record.stock.totalStock}</div>;
                    } else {
                        return <div>{record.stock.totalStock}</div>;
                    }
                }
            },
            {
                title: '商品状态',
                dataIndex: 'saleStatus',
                width: '5%',
                render: (text, record) => {
                    if (record.beactive == "N") {
                        if (text === 0) {
                            return <div className='rowchangecolor'>{'未发布'}</div>;
                        } else if (text === 1) {
                            return <div className='rowchangecolor'>{'上架区'}</div>;
                        } else if (text === 2) {
                            return <div className='rowchangecolor'>{'下架区'}</div>;
                        }
                    } else {
                        if (text === 0) {
                            return <div>{'未发布'}</div>;
                        } else if (text === 1) {
                            return <div>{'上架区'}</div>;
                        } else if (text === 2) {
                            return <div>{'下架区'}</div>;
                        }
                    }
                }
            }
        ]
        return (
            <Form>
                <div className='goods-label'>
                    <div className='goods-label-cont clearfix'>
                        <div className='goods-label-cont-nav clearfix'>
                            <Breadcrumb separator=">">
                                <Breadcrumb.Item>首页</Breadcrumb.Item>
                                <Breadcrumb.Item>商品管理</Breadcrumb.Item>
                                <Breadcrumb.Item>商品标签管理</Breadcrumb.Item>
                            </Breadcrumb>
                        </div>
                        <div className='member-content-Search clearfix'>
                            <div className='addetd addetd-z'>
                                <FormItem>
                                    {
                                        getFieldDecorator('txt_Inkey')(
                                            <Input className='addetd-a-r' addonBefore="内码/药品名称/通用名/品牌" placeholder="请输入" />
                                        )
                                    }
                                </FormItem>
                            </div>
                            <div className='addetd addetd-a indtner'>
                                <InputGroup compact>
                                    <Input addonBefore="类 别" />
                                    <Select value={this.state.isdrugstatus} onChange={this.drugStatusChange.bind(this)} placeholder='请选择'>
                                        <Option value="Y">处方药</Option>
                                        <Option value="N">非处方药</Option>
                                    </Select>
                                </InputGroup>
                            </div>
                            <div className='addetd addetd-a indtner'>
                                <InputGroup compact>
                                    <Input addonBefore="冷 藏" />
                                    <Select value={this.state.iscoldstorage} onChange={this.coldstorageChange.bind(this)} placeholder='请选择'>
                                        <Option value="Y">冷藏</Option>
                                        <Option value="N">非冷藏</Option>
                                    </Select>
                                </InputGroup>
                            </div>
                        </div>
                        <div className='member-content-Search clearfix'>

                            <div className='addetd addetd-a indtner'>
                                <InputGroup compact>
                                    <Input addonBefore="特 管" />
                                    <Select value={this.state.isspecialdrug} onChange={this.specialdrugChange.bind(this)} placeholder='请选择'>
                                        <Option value="Y">特管药品</Option>
                                        <Option value="N">非特管药品</Option>
                                    </Select>
                                </InputGroup>
                            </div>
                            <div className='addetd addetd-a indtner'>
                                <InputGroup compact>
                                    <Input addonBefore="状 态" />
                                    <Select value={this.state.salestatus} onChange={this.salestatusChange.bind(this)}>
                                        <Option value="0">未上架</Option>
                                        <Option value="1">已上架</Option>
                                        <Option value="2">已下架</Option>
                                    </Select>
                                </InputGroup>
                            </div>
                            <Button type="primary" className='member-button' icon="search" onClick={this.SearchProductInfoBtn.bind(this)}>搜索</Button>
                            <Button type="primary" className='member-button' icon="reload" onClick={this.ResetBtn.bind(this)}>重置</Button>
                        </div>
                        <div className='rowchangereds'>注：标红的行已删除</div>
                        <div className='allgoods-table clearfix'>
                            <Table
                                columns={columns}
                                dataSource={this.state.goodsinfolist}
                                pagination={false}
                                bordered
                            />
                            <div className='goods-label-tabletr'>
                                <Button className='goods-label-table-app' width={180} icon="sync" onClick={this.SynSKproduct.bind(this)}>一键同步</Button>
                            </div>
                        </div>
                        <div className='goods-label-let'>
                            <div className="floor-ppagi">
                                {
                                    this.state.goodsinfocount == 0 ?
                                        <p className="floor-ppagip">
                                            共{this.state.goodsinfocount}条记录
                                </p> :
                                        <p className="floor-ppagip">
                                            当前显示
                                    {this.state.pagesize * (this.state.pageindex - 1) + 1}—
                                    {this.state.pagesize * this.state.pageindex < this.state.goodsinfocount ? this.state.pagesize * this.state.pageindex : this.state.goodsinfocount}条记录，
                                    共{this.state.goodsinfocount}条记录
                                </p>
                                }
                                <Pagination current={this.state.pageindex} total={this.state.goodsinfocount || 1} defaultPageSize={this.state.pagesize} onChange={this.changePage.bind(this)} />
                            </div>
                        </div>
                    </div>
                </div>
            </Form>
        )
    }
}

const Goodsinfo = Form.create()(RegForm);
export default Goodsinfo;